<template>
	<div>
		<div class="header">
			<img src="../assets/jtz.png" alt="" class="jtz">
			<span class="title_text">添加地址</span>
		</div>
		<div class="text_container">
			<div class="section_list">
				<span class="section_left">联系人</span>
				<div class="section_right">
					<input type="text" placeholder="你的名字" class="input_style" v-model="name">
					<div class="choose_sex">
						<span class="choose_option">
							<i class="icon-span icon-span-select" :class="{'icon-span-select1' : isShow}" @click="xs"></i>
							<span>先生</span>
						</span>
						<span class="choose_option">
							<i class="icon-span icon-span-select" :class="{'icon-span-select1' : !isShow}" @click="ns"></i>
							<span>女士</span>
						</span>
					</div>
				</div>
			</div>
			<div class="section_list">
				<span class="section_left">联系电话</span>
				<div class="section_right">
					<div class="phone_add">
						<input type="text" placeholder="你的手机号" class="input_style" v-model="phone">
						<img src=""
						 alt="" height="20" width="20" @click="bxdz">
					</div>
					<input type="text" placeholder="备选电话" class="input_style phone_bk" v-show="bx" v-model="phone_bk">
				</div>
			</div>
			<div class="section_list">
				<span class="section_left">送餐地址</span>
				<div class="section_right">
					<div class="choose_address" @click="scdz">{{this.$route.params.name}}</div>
					<input type="text" placeholder="详细地址（如门牌号等）" class="input_style" v-model="address_detail">
				</div>
			</div>
			<div class="section_list">
				<span class="section_left">标签</span>
				<div class="section_right">
					<input type="text" placeholder="无/家/学校/公司" class="input_style" v-model="tag_type">
				</div>
			</div>
		</div>
		<div class="determine" @click="queding">确定</div>
		<div class="pop_up" v-show="isstatic">
			<img src="../../public/gantanhao.png" alt="">
			<p>{{ test }}</p>
			<p class="sure" @click="sure">确认</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "tjdz",
		data() {
			return {
				isShow: true,
				bx: false,
				isstatic: false,
				test: "",
				address: "小区/写字楼/学校等",
				address_detail: "",
				name: "",
				phone: "",
				sex: 1,
				poi_type: 0,
				phone_bk: "",
				tag_type: ""
			}
		},
		created() {
			window.console.log(this.$route.params.name)
			if(this.$route.params.name==undefined){
				this.$route.params.name="小区/写字楼/学校等"
			}
		},
		methods: {
			xs() {
				this.isShow = true;
				this.sex = 1;
			},
			ns() {
				this.isShow = false;
				this.sex = 2;
			},
			bxdz() {
				this.bx = true;
			},
			queding() {
				if (this.name == "") {
					this.isstatic = true;
					this.test = "请输入姓名";
				} else if (this.phone == "") {
					this.isstatic = true;
					this.test = "请输入电话号码";
				} else if (this.address == "asd") {
					this.isstatic = true;
					this.test = "请输入地址";
				}else if (this.address_detail==""){
					this.isstatic = true;
					this.test = "详细地址错误";
				}else if(this.tag_type==""){
					this.isstatic = true;
					this.test = "标签错误";
				}
			},
			sure() {
				this.isstatic = false;
			},
			scdz(){
				this.$router.push({path:'/tjdz/scdz'});
			}
		}
	}
</script>

<style scoped>
	input {
		border: none;
		outline: none;
	}

	.jtz {
		width: 70px;
		height: 70px;
		position: absolute;
		top: 12px;
	}

	.header {
		width: 100%;
		height: 90px;
		background-color: #3190e8;
		position: relative;
	}

	.title_text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		text-align: center;
		font-size: 38px;
		font-weight: 700;
	}

	.text_container {
		background-color: #fff;
		padding: 0 33px;
	}

	.section_list {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
	}

	.section_list .section_left {
		font-size: 33px;
		color: #333;
		flex: 2;
		line-height: 118px;
	}

	.section_list .section_right {
		flex: 5;
	}

	.section_list .section_right .input_style {
		width: 100%;
		height: 117px;
		font-size: 33px;
		color: #999;
	}

	.section_list .section_right .choose_sex {
		display: flex;
		line-height: 117px;
		border-top: 1px solid #f5f5f5;
	}

	.icon-span {
		display: inline-block;
		background-color: #fff;
		border-radius: 100%;
		border: 1px solid #ccc;
		position: relative;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 14px;
	}

	.icon-span::after {
		border: 4px solid transparent;
		border-left: 0;
		border-top: 0;
		content: " ";
		top: 7px;
		left: 14px;
		position: absolute;
		width: 8px;
		height: 16px;
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
		-webkit-transition: -webkit-transform .2s;
		transition: -webkit-transform .2s;
		transition: transform .2s;
		transition: transform .2s, -webkit-transform .2s;
	}

	.icon-span-select {
		background-color: #CCCCCC;
		border-color: #CCCCCC;
	}

	.icon-span-select1 {
		background-color: #4cd964;
		border-color: #4cd964;
	}

	.icon-span-select::after {
		border-color: #fff;
		-webkit-transform: rotate(45deg) scale(1);
		transform: rotate(45deg) scale(1);
	}

	.section_list .section_right .choose_sex .choose_option {
		font-size: 33px;
		color: #333;
		display: flex;
		align-items: center;
		margin-right: 37.5px;
	}

	.section_list .section_right .phone_add {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.section_list .section_right .phone_bk {
		border-top: 1px solid #f5f5f5;
	}

	.section_list .section_right .choose_address {
		font-size: 33px;
		color: #999;
		line-height: 117px;
		border-bottom: 1px solid #f5f5f5;
	}

	.determine {
		background-color: #4cd964;
		font-size: 33px;
		color: #fff;
		text-align: center;
		margin: 0 33px;
		line-height: 84px;
		border-radius: 9px;
		margin-top: 28px;
	}

	.pop_up {
		width: 580px;
		height: 316px;
		background: white;
		margin: 0 auto;
		border-radius: 20px;
		position: fixed;
		top: 400px;
		left: 80px;
		text-align: center;


	}

	.pop_up img {
		height: 120px;
		width: 120px;
		/* padding-top: 40px; */

	}

	.sure {
		color: white;
		background: #4cd964;
		padding: 20px 0;
		position: ;
		margin-top: 108px;
		font-size: 40px;

	}
</style>
